<clr-modal [(clrModalOpen)]="showInfoModal" [clrModalSize]="'lg'" [clrModalClosable]=false>
  <h3 class="modal-title">区域详情</h3>
  <div class="modal-body" *ngIf="currentRegion && currentRegion.template === 'vsphere'">
    <hr/>
    <div class="card-block">
      <ul class="list-unstyled">
        <li><b style="margin-right: 16px">名称:</b>{{currentRegion.name}}</li>
        <li><b style="margin-right: 16px">云提供商:</b>{{currentRegion.template}}</li>
        <li><b style="margin-right: 16px">集群数量:</b>{{currentRegion.cluster_size}}</li>
        <li><b style="margin-right: 16px">可用区数量:</b>{{currentRegion.zone_size}}</li>
        <li><b style="margin-right: 16px">数据中心:</b>{{currentRegion.cloud_region}}</li>
        <li><b style="margin-right: 16px">vCenter 地址:</b>{{currentRegion.vars['vc_host']}}</li>
        <li><b style="margin-right: 16px">vCenter 用户:</b>{{currentRegion.vars['vc_username']}}</li>
        <li><b style="margin-right: 16px">创建时间:</b>{{currentRegion.date_created |  date: 'yyyy-MM-dd HH:mm:ss'}}</li>
      </ul>
    </div>
  </div>
  <div class="modal-body" *ngIf="currentRegion && currentRegion.template === 'openstack'">
    <hr/>
    <div class="card-block">
      <ul class="list-unstyled">
        <li><b style="margin-right: 16px">名称:</b>{{currentRegion.name}}</li>
        <li><b style="margin-right: 16px">云提供商:</b>{{currentRegion.template}}</li>
        <li><b style="margin-right: 16px">集群数量:</b>{{currentRegion.cluster_size}}</li>
        <li><b style="margin-right: 16px">可用区数量:</b>{{currentRegion.zone_size}}</li>
        <li><b style="margin-right: 16px">数据中心:</b>{{currentRegion.cloud_region}}</li>
        <li><b style="margin-right: 16px">Identity 地址:</b>{{currentRegion.vars['openstack_identity']}}</li>
        <li><b style="margin-right: 16px">OpenStack 用户:</b>{{currentRegion.vars['openstack_username']}}</li>
        <li><b style="margin-right: 16px">创建时间:</b>{{currentRegion.date_created |  date: 'yyyy-MM-dd HH:mm:ss'}}</li>
      </ul>
    </div>
  </div>
  <div class="modal-footer">
    <button type="button" class="btn" (click)="cancel()" >取消</button>
  </div>
</clr-modal>
